<?php
include 'logic_layer.php';

header('X-Frame-Options: GOFORIT');

if (!isset($_SESSION)) {
    session_start();
}

//make sure the session starts from the index page
//and that the session step matched current page
if (!isset($_SESSION["step"]) || $_SESSION["step"] != "tutorial") {
    header('Location: index.php');
}
?>

<!DOCTYPE html>
<html>
    <head>
        <title>Tutorial</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="assets/js/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <!-- Main -->
        <link href="main.css" rel="stylesheet" media="screen">

    </head>

    <body>
        <!-- Part 0: Steps -->
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="steps">
                    <p class="steps-done">Welcome &#10140; Outline &#10140; Personality Test &#10140; </p>
                    <p class="step-current">IFTTT Tutorial</p>
                    <p class="steps-pending"> &#10140; Making an Recipe &#10140; Questionnaire</p>
                </div>
            </div>
        </div>


        <div class="tutorial-about-container"><img src="./resources/images/ifttt.jpeg" style="width: 100%;" ></div>
        <div id="bar" class="tutorial-about-bar">
            <div class="tutorial-about-bar">
                <table style="width: 100%;">
                    <tr >
                        <td style="vertical-align:middle;text-align:center;" valign="middle">
                            <button class="btn btn-success btn-large" onclick="continueStudy();" type="button">Continue to the tutorial video</button>
                            <a style="margin-left: 10px;" target="_blank" href="https://ifttt.com/wtf">More info</a>
                        </td>

                    </tr>
                </table>
            </div>

            <form action='index.php' method='post' name='frm'>
                <input type='hidden' value='tutorial_video' name="step" />
            </form>

            <!-- Le javascript
            ================================================== -->
            <script src="assets/js/jquery/jquery-2.0.3.min.js"></script>
            <script src="assets/js/bootstrap/js/bootstrap.min.js"></script>
            <script src="assets/js/bootbox/bootbox.min.js"></script>

            <script>
                                var continueStudy = function() {
                                    // go to the next step
                                    document.frm.submit();
                                }

                                //==============
                                var resizeIframe = function() {
                                    jQuery('.tutorial-about-container').css('top', jQuery('.navbar navbar-fixed-top').height() + jQuery('.lead').height() + 20);
                                    jQuery('.tutorial-about-container').height(jQuery(document).height() - parseInt(jQuery('.tutorial-about-container').css('top')) - jQuery('#bar').height() - 5);
                                    jQuery('.tutorial-about-container').width(jQuery(document).width());
                                }

                                //load current recipe
                                jQuery(window).resize(function() {
                                    resizeIframe();
                                });

                                jQuery(window).resize();
            </script>

    </body>
</html>
